/**
  animation.css 的使用
 */

<template>
  <div>
    <div class="content-box">
      <button @click="onToggle">toggle</button>
      <transition
          name="fade"
          enter-active-class="animated bounceInLeft"
          leave-active-class="animated bounceOutRight"
        ><div v-show="isShow">是否显示</div>
      </transition>
    </div>
    
    <h5>功能：</h5>
    <ol class="desc-box">
      <li>
        <pre>
        appear: 是否在初始渲染时使用过渡。默认为 false
        enter-active-class: 指定 fade-enter-active 的class动画 显示
        leave-active-class: 指定 fade-leave-active 的class动画 隐藏
        appear-active-class: 指定出初始化渲染的动画样式
        </pre>
      </li>
      <li>animation 的使用</li>
    </ol>
    <p>{{ city }}</p>
    <p>{{ docubleCity }}</p>

    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-tishi"></use>
    </svg>
  </div>
</template>

<script>
import { mapState,mapGetters } from 'vuex'
export default {
  data() {
    return {
      isShow: true
    };
  },
  computed:{
    // ...mapState(['city']),
    // ...mapGetters(['docubleCity'])
    ...mapState({
      city:'city'
    }),
    ...mapGetters({
      docubleCity:'docubleCity'
    })
  },
  methods: {
    onToggle() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

<style>
/* .fade-enter{}
.fader-enter-active{}
.fader-enter-tor{} */
</style>
